<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>名句页面</title>
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <style>
        body{
            background-image: url("image/background_img.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
    </style>
</head>
<body>
<header id="header"></header>

<div class="container" >
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">首页</a></li>
            <li class="breadcrumb-item active">名句大全</li>
        </ol>
    </nav>

    <div class="row" id="famousLine">
        <div class="col col-sm-12 col-lg-12">

            <div class="card">
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item d-flex justify-content-between" v-for="line in lines">
                            <a :href="'lineDetail.html?'+line.gid+'?'+line.title" v-text="line.title">只愿君心似我心，定不负相思意</a>
                            <span class="d-none d-lg-block">
                                    ——<a :href="'poem.html?'+line.biaoti" id="info">
                                        <span class="author"><span>{{line.gid}}</span></span>
                                        《<span v-text="line.biaoti">卜算子·我住长江头</span>》
                                    </a>
                                </span>
                        </li>
                    </ul>
                    <nav class="mt-3">
                        <ul class="pagination pagination-sm justify-content-center">
                            <li class="page-item">
                                <a class="page-link" aria-label="Previous" href="" @click.prevent="loadLine(pageinfo.prePage)" v-show="!pageinfo.isFirstPage==true">
                                    <span aria-hidden="true">&laquo;</span>
                                    <span class="sr-only">上一页</span>
                                </a>
                            </li>
                            <li class="page-item" v-for="n in pageinfo.navigatepageNums">
                                <a class="page-link" href="" v-text="n" @click.prevent="loadLine(n)"
                                   :class="{'bg-secondary text-light': n == pageinfo.pageNum}">1</a>
                            </li>
                            <li class="page-item "><a class="page-link" href="">
                                <span aria-hidden="true">当前页<span  v-text="pageinfo.pageNum">5</span></span>
                            </a></li>
                            <li class="page-item ">
                                <a class="page-link" aria-label="Next" href="" @click.prevent="loadLine(pageinfo.nextPage)" v-show="!pageinfo.isLastPage==true">
                                    <span aria-hidden="true">&raquo;</span>
                                    <span class="sr-only">下一页</span>
                                </a>
                            </li>

                            <li class="page-item" >
                                <span aria-hidden="true">跳转到</span>
                                <input type="text" style="width: 40px" id="page"><button @click.prevent="JumpPoems()">跳转</button>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>

        </div>

    </div>
</div>

<footer id="footer"></footer>

</body>
<!--引入jq代码-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    $("#header").load("common/navigation.html")
    $('#footer').load("common/footer.html")

    let vm_famousLine = new Vue({
        el:"#famousLine",
        data:{
            lines:[],
            pageinfo:{},
            pages:""
        },
        methods:{
            loadLine:function (pageNum) {
                //判断 pageNum 是否存在
                if(!pageNum){
                    pageNum = 1;
                }
                axios({
                    url:"/ju/selectListByJu",
                    method:"get",
                    params:{
                        pageNum:pageNum
                    }
                }).then(function (r) {
                    vm_famousLine.lines = r.data.list;
                    vm_famousLine.pageinfo = r.data
                    vm_famousLine.pages = r.data.pages;
                    console.log(r.data.pages)
                    //console.log("名句结果:"+r.data.list)
                    //console.log("其他数据:"+r.data)
                }).then(() => {
                    $(".author").each(function () {
                        //获取诗词的id-0k
                        var str = $(this).text();
                        //console.log(str)
                        //调用后台接口，根据诗词表的id查询作者的姓名
                        axios({
                            url:"/ju/"+str,
                            method:"post"
                        }).then(r=> {
                            //获取作者的姓名
                            //console.log(r.data)
                            //将诗词表id(str)替换成作者姓名(r.data)
                            var st = str.replace(str,r.data);
                            //console.log("姓名->"+st)
                            //将作者姓名写入html中
                            $(this).html(st)
                        })
                    })
                })
            },
            JumpPoems:function () {
                var page = document.getElementById("page").value;
               // this.loadLine(page)
                if (page <= vm_famousLine.pageinfo.pages && page > 0){
                    this.loadLine(page)
                }else {
                    alert("页码不对，请重新输入！！最大页码: " +vm_famousLine.pages)
                    $("#page").val('')
                }
            }
        },
        created:function () {
            this.loadLine(1);
        }
    })
</script>
</html>